<template>
    <transition name="fade">
        <div class="alert">
            <div class="bg"></div>
            <div class="alert-wrapper">
                <h1 class="title">提示</h1>
                <div class="text">
                    <p>{{msg}}</p>
                </div>
                <div class="bottom">
                    <div class="btn cancel" @click="cancel">取消</div>
                    <div class="btn sure" @click="sure">确定</div>
                </div>
            </div>
        </div>
    </transition>
</template>
<script>
export default {
    data() {
        return {}
    },
    props: {
        msg: {
            type: String,
            default: '确认执行此操作?'
        }
    },
    methods: {
        //派发事件，确定
        sure() {
            this.$emit('sure-confirm')
        },
        //派发事件，取消
        cancel() {
            this.$emit('cancel-confirm')
        }
    }
}
</script>
<style  lang="less" scoped>
    @import '../../common/less/variable.less';
    .fade-enter-active, .fade-leave-active {
        transition: opacity @time-alert;
    }
    .fade-enter, .fade-leave-to {
        opacity: 0;
    }
    .alert{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        overflow:hidden;
        .bg{
            width:100%;
            height:100%;
            background:@color-alert-bg;
        }
        .alert-wrapper{
            width:280px;
            position:absolute;
            top:50%;
            left:50%;
            transform: translate(-50%, -50%);
            background:@color-alert-framebg;
            text-align:center;
            border-radius:@border-alert-radius;
            .title{
                font-size:16px;
                font-weight:700;
                color:@color-alert-title;
                margin-top:15px;
            }
            .text{
                margin:20px 20px;
                p{
                    font-size:14px; 
                    color:@color-alert-con;
                    font-weight:500;
                    line-height:18px;
                }
            }
            .bottom{
                display:flex;
                line-height:40px;
                border-top:1px solid @color-alert-line;
                .btn{
                    flex:1;
                    font-size:16px;
                }
                .cancel{
                    color:@color-alert-title;
                    border-right:1px solid @color-alert-line;
                }
                .sure{
                    color:@color-alert-sure;
                }
            }
        }
    }
</style>
